<template>

	<view class="order-css">
		<!-- #ifndef MP -->
		<view class="StatusBarHeightCss"></view>
		<!-- 固定在顶部的导航栏 -->
		<!-- 搜索导航 -->
		<view class="nav-bar">
			<view class="nav-bar-img">
				<image src="../../static/img/index1/u53.png" mode=""></image>
			</view>
		</view>
		<view class="status-placeholder-top"></view>
		<view class="status-placeholder-buttom"></view>
		<!-- #endif -->
		<view class="orderList">
			<view class="orderItem" v-for="(item,index) in orderList" :key="index" >
				<view class="order_one " @tap="toOrderDetail">
					<view class="order_one_left order_font_color">
						订单编号:{{item.orderID}}
					</view>
					<view class="order_one_right">
						{{item.orderStatus}}
					</view>
				</view>
				<view class="order_mid" @tap="toOrderDetail">
					<image :src="item.iconURL" mode="widthFix"></image>
					<view class="">
						<view class="order_desc order_font_color">
							{{item.desc}}
						</view>
						<view class="order_unit">
							<view class="order_price_color">
								¥{{item.unitPrice}}
							</view>
							<view class="">
								x{{item.piece}}
							</view>
						</view>
					</view>
				</view>
				<view class="order_footer" @tap="toOrderDetail">
					<view class="order_footer_left">
						<view class="order_font_color">
							共{{item.piece}}件商品
						</view>
						<view class="order_footer_xiaojian order_price_color">
							小计: ¥{{item.sumPrice}}
						</view>
					</view>
					<view class="order_btn" v-if="item.orderStatus ==='待付款'">
						<view class="order_btn_default">取消</view>
						<view class="order_btn_warn" @tap="toOrderConfirm">去付款</view>
					</view>
					<view class="order_btn" v-if="item.orderStatus ==='待发货'">
						<view class="order_btn_default">联系客服</view>
					</view>
					<view class="order_btn" v-if="item.orderStatus ==='已发货待确认'">
						<view class="order_btn_default" @tap="toOrderLogistics">查看物流</view>
						<view class="order_btn_default" >联系客服</view>
					</view>
					<view class="order_btn" v-if="item.orderStatus ==='交易完成'">
						<view class="order_btn_default" @tap="toOrderEvaluate">去评价</view>
					</view>
					<view class="order_btn" v-if="item.orderStatus ==='已取消'">
						<view class="order_btn_default" @tap="toOrderConfirm">再来一单</view>
					</view>
				</view>
			</view>
		</view>

		<uni-load-more :loadingType="loadingType"></uni-load-more>
	</view>

</template>

<script>
	import uniLoadMore from "components/uni-load-more.vue"
	export default {
		components: {
			uniLoadMore
		},
		data() {
			return {
				loadingType: 1,
				orderList: [{
						orderID: "E201810239489334",
						orderStatus: "待付款",
						iconURL: "/static/img/index1/u131.jpg",
						"desc": "「鹿语」黄铜印章 | 君子之风，雅致之礼 | 手工器物，古法铸造",
						"unitPrice": 288.00,
						"piece": 1,
						"sumPrice": 288.00
					},
					{
						orderID: "E201810239489334",
						orderStatus: "待发货",
						iconURL: "/static/img/index1/u131.jpg",
						"desc": "「鹿语」黄铜印章 | 君子之风，雅致之礼 | 手工器物，古法铸造",
						"unitPrice": 288.00,
						"piece": 1,
						"sumPrice": 288.00
					},
					{
						orderID: "E201810239489334",
						orderStatus: "已发货待确认",
						iconURL: "/static/img/index1/u131.jpg",
						"desc": "「鹿语」黄铜印章 | 君子之风，雅致之礼 | 手工器物，古法铸造",
						"unitPrice": 288.00,
						"piece": 1,
						"sumPrice": 288.00
					},
					{
						orderID: "E201810239489334",
						orderStatus: "交易完成",
						iconURL: "/static/img/index1/u131.jpg",
						"desc": "「鹿语」黄铜印章 | 君子之风，雅致之礼 | 手工器物，古法铸造",
						"unitPrice": 288.00,
						"piece": 1,
						"sumPrice": 288.00
					}
				]
			}
		},
		methods: {
			toOrderDetail(){
				uni.navigateTo({
					url:"/pages/order/order-detail"
				})
			},
			toOrderEvaluate(){
				uni.navigateTo({
					url:"/pages/order/order-evaluate"
				})
			},
			toOrderConfirm(){
				uni.navigateTo({
					url:"/pages/order/order-confirm"
				})
			},
			toOrderLogistics(){
				uni.navigateTo({
					url:'/pages/order/order-logistics'
				})
			}
		}
	}
</script>

<style lang="scss">
	.order-css {
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		width: 100%;
		// border: 1px solid red;
	}

	.order-css {

		// 		.nav-bar {
		// 			box-sizing: border-box;
		// 			width: 100%;
		// 			display: flex;
		// 			flex-direction: column;
		// 			justify-content: center;
		// 			align-items: center;
		// 			position: sticky;
		// 			background-color: #FFFFFF;
		// 			top: var(--status-bar-height);
		// 			height: 44px;
		// 			// border: 1px solid red;
		// 		}
		// 		
		// 		.nav-bar-img {
		// 			// border: 1px solid green;
		// 			display: flex;
		// 			flex-direction: column;
		// 			justify-content: center;
		// 			height: 44px;
		// 		}		

		.nav-bar {
			position: fixed;
			background-color: #FFFFFF;
			top: var(--status-bar-height);
			display: block;
			height: 44px;
			text-align: center;
			width: 100%;
			border-bottom: 1px solid rgba(242, 242, 242, 1);

			// border: 1px solid red;
		}

		.nav-bar-img {
			margin: auto;
			position: absolute;
			top: 50%;
			left: 0;
			bottom: 0;
			right: 0;
			height: 44px;
			;
		}

		.nav-bar-img image {
			width: 67px;
			height: 21px;
		}

		.orderItem {
			margin-bottom: 10upx;
		}

		//订单列表
		.order_one {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			padding: 5upx 20upx;
			// height: 80upx;
			// border:1px solid blue;
		}

		.order_one_right {
			// border:1px solid red;
			color: #FF6600;
		}

		.order_font_color {
			color: #666666;
			font-weight: 400;
			font-style: normal;
			font-size: 14px;
		}

		.order_mid {
			background-color: rgba(242, 242, 242, 1);
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			padding: 20upx 40upx;
			// border:1px solid red;
		}

		.order_mid image {
			width: 192upx;
			margin-right: 20upx;
		}

		.order_desc {
			font-size: 24upx;
			font-weight: normal;
		}

		.order_price_color {
			color: #F24439;
		}

		.order_unit {
			margin-top: 20upx;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
		}

		.order_footer {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			// border:1px solid red;
			background-color: rgba(242, 242, 242, 1);
			padding: 5upx 15upx 20upx 20upx;
		}
		
		.order_footer_xiaojian {
			margin-left: 10upx;
		}

		.order_footer_left {
			display: flex;
			flex-direction: row;
		}

		.order_footer_left view {
			margin-right: 10upx;
		}

		.order_btn {
			display: flex;
			flex-direction: row;
			justify-content: flex-end;
		}

		.order_btn_default {
			border: 1px solid rgba(121, 121, 121, 1);
			background-color: rgba(255, 255, 255, 1) !important;
			color: #797979;
		}

		.order_btn_warn {
			color: #FFFFFF;
			background-color: rgba(242, 68, 57, 1);
		}

		.order_btn view {
			text-align: center;
			min-width: 60px;
			border-radius: 2px;
			margin-left: 20upx;
			padding-left: 10upx;
			padding-right: 10upx;
			font-weight: 400;
			font-style: normal;
			font-size: 14px;
		}
	}
</style>
